<template>
<div> 
<div class="title">周末去哪儿</div>	


<ul>
	<li class="item" v-for="item of list" :key="item.id">
		<div class="item-img-wrapper"> 
		<img :src="item.imgUrl" class="item-img">
		</div>

		<div class="item-info">
		<p class="item-title">{{item.title}}
		</p>
		<p class="item-desc">{{item.desc}}</p>
		
		</div>
	</li>


</ul>
</div>

</template>

<script >

export default{
  name:'HomeWeekend',
  props: {
  	list: Array
  }
  
	}
</script>
<style  lang="stylus" scoped>
 @import '~styles/mixins.styl'
	
	.title
		margin-top: .4rem
		line-height: 1.5rem
		background: #eee
		text-indent:.2rem
		.item-img-wrapper
			overflow: hidden
			height: 0
			padding-bottom: 37.09%
			.item-imgr
				width: 100%
	.item-title
				line-height: 1rem
				margin-top: .2rem
				font-size: 1rem
				width: 70%
				overflow: hidden
				white-space: nowrap
				text-overflow: ellipsis
	.item-desc
				line-height: 1.1rem
				margin-top: .2rem
				margin-bottom : .2rem
				color: gray 
				ellipsis()		
			
</style>	